<template>
    <div>
      商品列表
      <div class="goodsList">
        <ul>
          <li v-for="(item,index) in allGoods">
            <img :src='"static/"+item.productImage' alt="">
            <div class="goodsName">{{item.productName}}</div>
            <div class="goodsPrice">{{item.salePrice}}</div>
            <el-button type="danger" @click="toCart(item.productId)">加入购物车</el-button>
          </li>
        </ul>
      </div>
    </div>

</template>

<script>
    export default {
        name: "goodsList",
        data(){
          return {
            allGoods:[],
          }
        },
        mounted(){
          this.$http.get("/api/goods/list").then(res=>{
            this.allGoods=res.data.result
          })
        },
      methods:{
        toCart(productId){
          this.$http.post("/api/goods/toCart",{
            "productId":productId
          }).then(res=>{
            if(res.data.code == 200){
              this.$message.success('加入购物车成功');
            }else if(res.data.code == 300){
              this.$message.error(res.data.msg);
            }else{
              this.$message.error(res.data.msg);
            }
          })
        }
      }
    }
</script>

<style >
.goodsList{
  width:800px;
  height:800px;
  margin:20px auto;
}
.goodsList ul li{
  width: 23%;
  height:auto;
  float:left;
  list-style: none;
  border:1px solid grey;
  margin-left: 1%;
  margin-top:10px;
  text-align: center;
}
.goodsList ul li img{
  width: 100%;
}
</style>
